<template>
  <div class="orderquery">
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <!-- 酒店姓名及参数 -->
    <div class="above">
      <div class="above_left">
        <div>酒店名称:{{ room.baseInfo.name }}</div>
        <div>
          酒店地址:
          <span style="margin-right: 20px">{{
            room.baseInfo.address.addressLine.name
          }}</span>
        </div>
        <div>
          <span>{{ room.businessZoneName }}</span>
        </div>
      </div>
    </div>
    <!-- <el-button type="text" @click="open">点击打开 Message Box</el-button> -->
    <!-- 下方大 盒子  -->
    <div class="big">
      <!-- 左边盒子 -->
      <div class="big_left">
        <div class="time">
          <el-date-picker
            size="mini"
            style="width: 130px"
            :picker-options="pickerBeginDateBefore"
            v-model="conditions.arrivalDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="入住日期"
            ref="provinceName"
          >
          </el-date-picker>
          <!-- <span style="margin-right:40px;">{{conditions.arrivalDate,}}</span> -->
          <span style="margin: 0 40px 0 40px">
            {{ lateness(conditions.arrivalDate, conditions.departureDate) }}
            晚</span
          >
          <el-date-picker
            size="mini"
            style="width: 130px"
            :picker-options="pickerBeginDateBefore"
            v-model="conditions.departureDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="入住日期"
            ref="provinceName"
          >
          </el-date-picker>
          <!-- <span>{{conditions.departureDate}}</span> -->
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 10px"
            @click="backByIdHotelDetail"
            >重新查询</el-button
          >
        </div>
        <div class="middle">
          <!-- <div class="middle_1">
            <el-row>
              <el-button size="mini" @click="breakfastall">全部</el-button>
              <el-button size="mini" @click="breakfast">含早餐</el-button>
              <el-button size="mini" @click="confirm">立即确认</el-button>
              <el-button size="mini" @click="kingBedRoom">大床房</el-button>
              <el-button size="mini" @click="doubleBedRoom">双床房</el-button>
              <el-button size="mini" @click="cancel">免费取消</el-button>
              <el-button size="mini" @click="prepaid">在线付款</el-button>
              <el-button size="mini" @click="collect">到店付款</el-button>
              <el-button size="mini" @click="freeWIFIInternet">免费WI-FI上网</el-button>
              <el-button size="mini" @click="freeWiredBroadband">免费有宽带</el-button>

            </el-row>
          </div> -->
          <div class="middle_2" v-for="(item, index) in roomlist" :key="index">
            <div class="room_1">
              <div  v-if="item.room.realroom.roomContents[0].images[0]">
               <el-image
                  :src="item.room.realroom.roomContents[0].images[0].links[0].url"
                  :preview-src-list="picPathImg"
                  class="img"
                ></el-image> 
              </div>
              <div>{{ item.room.roomName }}</div>
            </div>
            <!-- 订房详情 -->
            <div>
              <div class="middle_3">
                <div class="room_1">
                  <div
                    v-for="(items, index) in item.room.bedGroups[0]"
                    :key="index"
                  >
                    <span>{{ items.bedType }}-{{ items.bedDesc }}</span>
                  </div>
                  <div>
                    {{ item.service.mealType[0].count }}份{{
                      item.service.mealType[0].code == "RO"
                        ? "无餐"
                        : item.service.mealType[0].code == "BB"
                        ? "早餐"
                        : item.service.mealType[0].code == "LO"
                        ? "午餐"
                        : item.service.mealType[0].code == "DO"
                        ? "晚餐"
                        : item.service.mealType[0].code == "BL"
                        ? "早午餐"
                        : item.service.mealType[0].code == "BD"
                        ? "早晚餐"
                        : item.service.mealType[0].code == "LD"
                        ? "午晚餐"
                        : item.service.mealType[0].code == "AI"
                        ? "早午晚餐"
                        : ""
                    }}
                  </div>
                </div>
                <div class="room_1">
                  <div>
                    {{
                      item.room.window == 0
                        ? "有窗"
                        : item.room.window == 1
                        ? "部分有窗"
                        : "无窗"
                    }}
                  </div>
                  <div>
                    <!-- {{items.ratePlanName}} -->
                  </div>
                </div>
                <div class="room_1">
                  <div>
                    {{
                      item.cancelPolicy[0].cancelType == 0
                        ? "不可取消"
                        : "可以取消"
                    }}
                  </div>
                  <div v-if="item.cancelPolicy[0].cancelType == 1">
                   
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">{{
                          item.cancelPolicy[0].moveUpCancelHour+'前取消'
                        }}</div>
                      <div>
                         {{item.cancelPolicy[0].moveUpCancelDays=='0'?'当天取消':'提前'+ item.cancelPolicy[0].moveUpCancelDays +'天取消'}}
                      </div>
                    </el-tooltip>
                  </div>
                  
                  <div>
                    <el-tooltip placement="bottom" effect="light">
                      <div slot="content">{{
                          item.productBase.confirmType == 0
                            ? "需等待确认"
                            : "预定次房型后可快速确认订单"
                        }}</div>
                      <div>
                        {{
                          item.productBase.confirmType == 0
                            ? "非立即确认"
                            : "立即确认"
                        }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
                <div class="room_2">
                  <el-tooltip placement="bottom" effect="light">
                    <div slot="content">
                      <span>单价:</span>
                      <div  v-for="(itemss,index) in item.inclusivePrice" :key="index">
                        <div style="display:flex"><span>{{itemss.date}}</span>: <span>￥{{itemss.salePrice/100}}</span>
                      </div>
                      </div>
                      <div style="display: flex">
                        <span>均价</span>
                        <span>￥{{jisuanprice(item.inclusivePrice)/100}}</span>
                      </div>
                      <div style="display: flex">
                        <span>总价</span>
                        <span style="color:red">￥{{priceSum(item.inclusivePrice)/100}}</span>
                      </div>
                    </div>
                    <div style="font-size: 20px; color:#388DEF;">￥{{jisuanprice(item.inclusivePrice)/100}}</div>
                  </el-tooltip>
                </div>
                <div>
                  {{item.productBase.productStatus=='0'?'满房':'可预订'}}
                </div>
                <div class="room_3">
                  <el-button
                  v-if="item.productBase.productStatus == '1'"
                    style="background-color: #f49726; color: #fff"
                    size="mini"
                    @click="members(item, index, indexs)"
                    >预定</el-button
                  >
                  <div   v-if="item.productBase.productStatus == '1'" class="room_1" style="margin-top: 5px; margin-left: 8px;width:80px">
                      <!-- <div slot="content">{{items.description}}</div> -->
                      <div>
                        {{
                          item.productBase.paymentType == 0
                            ? "预付"
                            : item.productBase.paymentType == 1
                            ? "担保"
                            : "现付非担保"
                        }}
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边大盒子 -->
      <div class="big_right">
        <div class="navigation">
          <el-tabs v-model="activeName">
            <!-- 酒店介绍 -->
            <el-tab-pane label="酒店介绍" name="first">
              <div class="navigation_1">
                <div style="margin-right: 30px">联系方式</div>
                <div>{{ room.baseInfo.phone }}</div>
              </div>
              <!-- <div class="navigation_1">
                <div style="margin-right: 30px">基本信息</div>
                <div>{{ room.basicInformation }}</div>
              </div> -->
              <div class="navigation_1">
                <div style="margin-right: 30px">酒店介绍</div>
                <div>{{ room.detailInfo.description }}</div>
              </div>
              <hr />
              <!-- <div class="navigation_1">
                <div style="margin-right:30px;width:160px;">预定规则:</div>
                <div>{{room.entryAndDepartureTime}}</div>
              </div> -->
              <div class="navigation_1">
                <div style="margin-right: 30px">服务设施</div>
                <div>
                  <div 
                    v-for="(item, index) in room.facilities[0].facilityItems"
                    :key="index"
                  >
                    <span v-if="item.value=='1'" >{{ item.name }}</span>
                  </div>
                </div>
              </div>
              <!-- <div class="navigation_1">
                <div style="margin-right: 30px">周边交通:</div>
                <div>{{ room.traffic }}</div>
              </div>
              <div class="navigation_1">
                <div style="margin-right: 30px">描述:</div>
                <div>{{ room.field_22 }}</div>
              </div> -->
              <div class="navigation_1">
                <div style="margin-right: 30px">酒店设施:</div>
                 <div>
                  <div
                    v-for="(item, index) in room.facilities[1].facilityItems"
                    :key="index"
                  >
                   <span v-if="item.value=='1'" >{{ item.name }}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="酒店图片" name="second">
              <div
                v-for="(item, index) in picture"
                :key="index"
                class="img_2Div"
              >
                <img :src="item.url" alt="" class="img_2" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 会员信息弹窗 -->
      <el-dialog
        title="确认会员信息"
        :visible.sync="prompt"
        :close-on-click-modal="false"
        width="40%"
      >
        <div>信息查询</div>
        <div class="huiyuan">
          <el-form
            ref="form"
            :rules="rules"
            :model="Mobilephone"
            label-width="80px"
          >
            <span style="font-size: 14px">手机号</span>
            <el-input
              size="mini"
              style="width: 150px; margin-right: 10px"
              v-model="Mobilephone.phone"
              placeholder="请输入手机号"
            ></el-input>
            <span style="font-size: 14px">会员卡号</span>
            <el-input
              size="mini"
              style="width: 150px"
              v-model="Mobilephone.cardNum"
              placeholder="请输入会员卡号"
            ></el-input>
            <el-button
              size="mini"
              style="margin-left: 20px; background-color: #f49726; color: #fff"
              @click="queryCustomer('Mobilephone')"
              >查询</el-button
            >
          </el-form>
          <div style="margin-top: 20px">
            <span style="font-size: 16px; margin-botton: 10px">会员信息</span>
            <div style="margin-top: 10px" v-if="JSON.stringify(huiyuan) != '{}'">
              <div >
                <span style="width: 100px">会员姓名:</span>
                <span >{{
                  huiyuan.userName ? huiyuan.userName : "暂无姓名"
                }}</span>
              </div>
              <div>
                <span>会员卡号:</span>
                <span > {{
                  huiyuan.userCardBO.cardNumber ? huiyuan.userCardBO.cardNumber : "暂无"
                }}</span>
              </div>
              <div>
                <span>卡类型:</span>
                <span > {{
                  huiyuan.userCardBO.cardName ? huiyuan.userCardBO.cardName : "暂无"
                }}</span>
              </div>
              <div>
                <span>手机号:</span>
                <span>{{
                  huiyuan.userAccount ? huiyuan.userAccount : "暂无手机号"
                }}</span>
              </div>
                  <div>
                <span>备注:</span>
                <span>{{
                  huiyuan.remark ? huiyuan.remark : "暂无"
                }}</span>
              </div>
            </div> 
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="prompt = false">取 消</el-button>
          <el-button
            size="mini"
            v-if="huiyuan.userAccount"
            type="primary"
            @click="jump"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import crumbs from "../../components/Crumbs.vue";
export default {
  name: "orderquery",
  components: {
    crumbs,
  },
  data() {
    return {
      pickerBeginDateBefore: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果当天可选，就不用减8.64e7
        },
      },
      hotelEnum: "",
      theroomnumber: "", //房间数量
      resList1: "",
      picPathImg: [],
      indexs: "",
      picture: [],
      RoomTypeId: "",
      information: {},
      // 表单校验
      rules: {
        phone: [
          {
            required: true,
            message: "请输手机号",
            trigger: "blur",
          },
          {
            min: 7,
            max: 11,
            message: "长度在 7 到 11 个字符",
            trigger: "blur",
          },
        ],
      },
      huiyuan: {},
      // 面包屑
      BreadCrumb: [
        {
          path: "/reservation/thequery",
          name: "酒店查询",
        },
        {
          path: "/hotel/details",
          name: "酒店列表",
        },
      ],
      // 会员信息查询
      Mobilephone: {
        phone: "",
        idCode: "",
      },
      // 弹窗
      prompt: false,
      obj: {},
      arrlist: [],
      button: [],
      roomlist: [],
      hotelFacilitiesList: {},
      // 右侧导航
      activeName: "first",
      room: {},
      //  传入订单页

      hotelId: "",
      name: "",
      info: {},

      //  酒店假数据
      // obj:{
      //   arrivalDate:"",
      //   departureDate:"",
      //   hotelId:"",
      // },
      conditions: {
        arrivalDate: "",
        departureDate: "",
        hotelId: "",
        conditionList: {
          breakfast: "breakfast",
          confirm: "confirm",
          kingBedRoom: "kingBedRoom",
          doubleBedRoom: "doubleBedRoom",
          cancel: "cancel",
          availableToOrder: "availableToOrder",
          prepaid: "prepaid",
          collect: "collect",
          freeWIFIInternet: "freeWIFIInternet",
          freeWiredBroadband: "freeWiredBroadband",
        },
      },
    };
  },
  methods: {
    ifprompt() {
      this.$confirm("请查询会员信息", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      });
    },
    ifprompt1() {
      this.$confirm("未查到会员信息", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      });
    },
    // 酒店图片
    getCrmContent() {
      this.$axios
        .getCrmContent({
          hotelIds: [this.conditions.hotelId],
          include: [
            "HotelContent.baseInfo",
            "HotelContent.baseInfo",
            "HotelContent.detailInfo",
            "HotelContent.detailInfo",
            "HotelContent.notices",
            "HotelContent.notices",
            "HotelContent.policy",
            "HotelContent.policy",
            "HotelContent.facilities",
            "HotelContent.facilities",
            "HotelContent.images",
            "HotelContent.images",
            "HotelContent.roomBaseInfos",
            "HotelContent.roomBaseInfos",
          ],
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.room = res.data.result.hotelContents[0];
            let picArr = res.data.result.hotelContents[0].images;
            for (let i = 0; i < picArr.length; i++) {
              for (let j = 0; j < picArr[i].links.length; j++) {
                this.picture.push(picArr[i].links[j]);
              }
            }
            console.log(this.picture);
          }
        });
    },
    lateness(sDate1, sDate2) {
      var dateSpan, tempDate, iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays;
    },
    // 计算均价
    jisuanprice(val){
      let price =0
      val.forEach(item => {
        price+=item.salePrice
      });
      return price/val.length
    },
    priceSum(val){
      let price =0
      val.forEach(item => {
        price+=item.salePrice
      });
    return price
    },
    // 预定
    members(index, indexs) {
      console.log(index, indexs);
      this.prompt = true;
      
      this.hotelId = index.hotelId;
      this.name = index.name;
      this.info = index
      console.log(this.hotelId,this.name,this.info);
    },
    // 查询物理房间
    backByIdHotelDetail() {
            this.showLoading();
      this.$axios
        .getbackByIdgetavail({
          // 入住日期
          checkin: this.conditions.arrivalDate,
          // 离店日期
          checkout: this.conditions.departureDate,
          // 酒店id
          hotelId: this.conditions.hotelId,
          goodsType: 1,
          currency: "CNY",
          roomCriteria: {
            roomCount: this.theroomnumber,
            adultCount: 2,
            childCount: 2,
            childAges: [5, 8],
          },
          filter: {
            productType: 3,
          },
        })
        .then((res) => {
          this.closeLoading();
          console.log(res);
          if (res.code == "00000") {
            this.roomlist = res.data.result.availability[0].availProduct;
            // console.log(this.room)
            // console.log(this.room.hotelFacilitiesList)
            // console.log(this. room.hotelDetailsVoList)
            // this.roomlist = this.room.hotelDetailsVoList
            // console.log(this.roomlist)
            // this.button = this.room.conditionList
            // console.log(this.room.conditionList)
            // console.log(this.button)
            // this.picture = this.room.hotelPictureList
            // console.log(this.picture)
          }
        });
    },
    // // 全部
    // breakfastall() {
    //   console.log(this.conditions)
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 含早餐
    //       this.conditions.conditionList.breakfast,
    //       // 立即确认
    //       this.conditions.conditionList.confirm,
    //       // 大床房
    //       this.conditions.conditionList.kingBedRoom,
    //       // 双床房
    //       this.conditions.conditionList.doubleBedRoom,
    //       // 免费取消
    //       this.conditions.conditionList.cancel,
    //       // 可订
    //       this.conditions.conditionList.availableToOrder,
    //       // 在线付款
    //       this.conditions.conditionList.prepaid,
    //       // 到店付款
    //       this.conditions.conditionList.collect,
    //       // 免费WI-FI上网
    //       this.conditions.conditionList.freeWIFIInternet,
    //       // 免费有线宽带
    //       this.conditions.conditionList.freeWiredBroadband,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }
    //   })
    // },
    // // 含早餐
    // breakfast() {
    //   console.log(this.conditions)
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 含早餐
    //       this.conditions.conditionList.breakfast,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }
    //   })
    // },
    // // 立即确认
    // confirm() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 立即确认
    //       this.conditions.conditionList.confirm,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }

    //     }
    //   })
    // },
    // // 大床房
    // kingBedRoom() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 大床房
    //       this.conditions.conditionList.kingBedRoom,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }

    //     }
    //   })
    // },
    // // 双床房
    // doubleBedRoom() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 双床房
    //       this.conditions.conditionList.doubleBedRoom,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }
    //   })
    // },
    // // 免费取消
    // cancel() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 免费取消
    //       this.conditions.conditionList.cancel,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }
    //   })
    // },
    // // 可订
    // availableToOrder() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 可订
    //       this.conditions.conditionList.availableToOrder,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }
    //   })
    // },
    // // 在线付款
    // prepaid() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 在线付款
    //       this.conditions.conditionList.prepaid,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }
    //   })
    // },
    // // 到店付款
    // collect() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 到店付款
    //       this.conditions.conditionList.collect,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }

    //   })
    // },
    // // 免费WI-FI上网
    // freeWIFIInternet() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 免费WI-FI上网
    //       this.conditions.conditionList.freeWIFIInternet,
    //     ],
    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }
    //   })
    // },
    // // 免费有线宽带
    // freeWiredBroadband() {
    //   this.$axios.getbackByIdHotelDetail({
    //     // 入住日期
    //     ArrivalDate: this.conditions.arrivalDate,
    //     // 离店日期
    //     DepartureDate: this.conditions.departureDate,
    //     // 酒店id
    //     HotelIds: this.conditions.hotelId,
    //     conditionList: [
    //       // 免费有线宽带
    //       this.conditions.conditionList.freeWiredBroadband,
    //     ],

    //   }).then((res) => {
    //     console.log(res);
    //     if (res.code == "200") {
    //       if (!res.data) {
    //         this.$confirm('抱歉，没有符合条件的房源信息', '提示', {
    //           confirmButtonText: '确定',
    //           type: 'warning'
    //         })
    //       } else {
    //         this.room = res.data;
    //         console.log(this.room)
    //         console.log(this.room.hotelFacilitiesList)
    //         console.log(this.room.hotelDetailsVoList)
    //         this.roomlist = this.room.hotelDetailsVoList
    //         console.log(this.roomlist)
    //         this.button = this.room.conditionList
    //         console.log(this.room.conditionList)
    //         console.log(this.button)
    //         this.picture = this.room.hotelPictureList
    //         console.log(this.picture)
    //       }
    //     }
    //   })
    // },
    // 会员信息查询
    queryCustomer() {
      this.$axios
        .getqueryCustomer({
          // 手机号
          phone: this.Mobilephone.phone,
          // 身份证号
          cardNumber: this.Mobilephone.idCode,
          // 会员卡号
          vipNumber: this.Mobilephone.cardNum,
        })
        .then((res) => {
          console.log(res);
          // this.resList1=res
          // console.log(this.resList1)
          if (res.code == "00000") {
            if (res.data) {
            (this.huiyuan = res.data), console.log(this.huiyuan);

            }else{
              this.huiyuan = {}
            }
          }
        });
    },
    // 确定按钮跳转填写订单页面
    jump() {
      if (this.Mobilephone.phone == "") {
        this.ifprompt();
      } else {
        this.$router.push({
          name: "order",
          params: {
            hotelId: this.conditions.hotelId,
            huiyuan: this.huiyuan,
            name: this.name,
            info: this.info,
            conditions: this.conditions,
            arrlist: this.arrlist,
            hotelEnum: this.hotelEnum,
            theroomnumber: this.theroomnumber,
            room:this.room
          },
        });
        this.prompt = false;
      }
    },
    //跳出
    closeLoading() {
      this.tableLoading.close();
    },
    //进入
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        // target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
  },
  mounted() {
    console.log(this.$route.params);
    this.hotelEnum = this.$route.params.hotelEnum;
    this.theroomnumber = this.$route.params.theroomnumber;
    this.conditions.arrivalDate = this.$route.params.obj.arrivalDate;
    this.conditions.departureDate = this.$route.params.obj.departureDate;
    this.conditions.hotelId = this.$route.params.obj.hotelId;
    this.arrlist = this.$route.params.arr;
    this.getCrmContent();
    this.backByIdHotelDetail();

  },
};
</script>

<style scoped>
.orderquery {
  background-color: #f2f2f2;
  font-size: 14px;
}

.above {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
}

.above_left {
  font-size: 16px;
  width: 99.9%;
  margin-right: 30px;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  background-color: #fff;
}

.above_right {
  display: flex;
  width: 48%;
  background-color: #fff;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.big {
  display: flex;
  margin-top: 20px;
}

.big_left {
  margin-left: 20px;
  width: 60%;
  margin-right: 10px;
  background-color: #fff;
  padding-left: 10px;
  padding-top: 10px;
}

.big_right {
  margin-left: 20px;
  width: 35%;
  background-color: #fff;
}

.time {
  background-color: #f5f8f9;
  margin-bottom: 20px;
  margin-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.middle_1 {
  margin-top: 10px;
}

.middle_2 {
  display: flex;
  margin-top: 20px;
  background-color: #f5f8f9;
  padding-top: 10px;
  padding-left: 10px;
  margin-right: 10px;
}

.middle_3 {
  display: flex;
}

.room_1 {
  width: 120px;
  margin-right: 8px;
}

.room_3 {
  /* width: 200px; */
  /* background-color: aqua; */
  margin-left: 30px;
}

.navigation {
  padding-left: 10px;
  padding-right: 10px;
}

.navigation_1 {
  display: flex;
}

.navigation_1 {
  margin-bottom: 10px;
}

.img {
  width: 80px;
  height: 50px;
}

.img_2Div {
  width: 90%;
}
.img_2 {
  width: 90%;
}
.room_2{
  width:100px
}
</style>